<template>
	<view class="ListView">
		<view class="content">

			<z-paging ref="paging" v-model="dataList" @query="queryList" :topZIndex="99999" :bottomZIndex="999999">
				<template #top>


					<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
						:initialBottom="80" @btnClick="add">
						<template #BtnContent>
							<u-icon name="plus" color="#fff" size="54rpx"></u-icon>
						</template>
					</m-drag-button>

					<u-navbar :fixed="false" :title="WorkbenchesTitle+'列表'" :autoBack="true" :safeAreaInsetTop="true"
						leftIconColor="#fff"></u-navbar>
					<view class="TabsBox1">
						<view class="example-body">
							<uni-datetime-picker v-model="singleTimes" @maskClick="PickerIndex = 1"
								@show="PickerIndex = 99999999999" :style="{'z-index':PickerIndex}" @change="ChangeDate"
								:clearIcon="false" type="daterange" :end="EndDate"
								rangeSeparator="至"></uni-datetime-picker>
						</view>
						<view style="width: 10%;display: flex;align-items: center;justify-content: end;">
							<uni-icons fontFamily="CustomFontPlatform" style="font-weight: 600;" color="#999"
								@click="OpenFilterPopup" :size="20">{{$utils.toUniCode('&#xe628;')}}</uni-icons>
						</view>

					</view>

				</template>

				<view style="padding: 0 10px;">
					<view class="CardBox" @click="itemClick(row,index)" v-for="(row, index) in dataList" :key="index">
						<view class="CardMainBox">
							<view class="CardTop">
								<view class="OrderStatus" :class="GetStatusBackClass(row.Approve)">
									{{row.Approve?'审核通过':'待审核'}}
								</view>
							</view>

							<view style="color:black;font-size:28rpx;margin-top:8px">
								<text>{{row.BillNO}}</text>
							</view>
							<view style="margin-top: 8px;">

								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="单据号:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.BillNO}}</text>
										</view>
									</template>
								</m-field>

								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="单据日期:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.BillDate}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" :label="WorkbenchesTitle+'人:'">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.EmplName}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									v-show="WorkbenchesTitle=='领用'" :borderBottom="false" label="领用时间:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.CKTime}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									v-show="WorkbenchesTitle=='归还'" :borderBottom="false" label="归还时间:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.RKTime}}</text>
										</view>
									</template>
								</m-field>
							</view>


						</view>
					</view>

				</view>
				<template #bottom>

				</template>

			</z-paging>
		</view>

		<u-popup class="MainPopup" :show="ShowFilterPopup" mode="bottom" :round="12" zIndex="999999"
			@close="closeFilterPopup">
			<view class="f-dc" style="height: 50vh;" :style="$utils.disposeSafeBottomFun()">

				<u-navbar :fixed="false" title="筛选" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeFilterPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="PopupMainBox">
					<view>
						<view class="TitleBox">
							<text>起止时间</text>
						</view>

						<view class="CheckBox">
							<view class="My_Picker_Box">
								<view class="PickMainBox">
									<u-icon name="calendar" color="#c0c4cc" size="24"></u-icon>
									<view @click="addTime('开始')" class="My_Picker_Text">
										<text>{{FormData.FBDate}}</text>
									</view>
									<text>至</text>
									<view @click="addTime('结束')" class="My_Picker_Text">
										<text>{{FormData.FEDate}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view style="margin-top: 20px;">
						<view class="TitleBox">
							<text>{{WorkbenchesTitle}}人员</text>
						</view>
						<u-cell-group :border='false'>
							<u-cell :isLink="true" :title='FormData.EmplName' class="custom-cell"
								@click="openBaseScreen(WorkbenchesTitle+'人员','radio')"></u-cell>
						</u-cell-group>
					</view>
				</view>

				<view class="BottomBox">
					<button class="SaveBtn" @click="ResetBtn">重置</button>
					<button class="SubBtn" @click="submit">确认</button>
				</view>
			</view>
			<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel='show = false'
				@confirm='pickerConfirm'></u-datetime-picker>
		</u-popup>

	</view>

</template>

<script>
	import {
		formatDateTime,
		getTimeStamp,
		getFormatDateTime,
		getBefore7DateTime
	} from '@/st_mold/common/base.js';

	export default {

		data() {
			return {
				BtnShow: false, // 按钮样式初始化有问题，等加载完再显示
				ShowFilterPopup: false, //筛选是否显示
				disabled: false, //按钮禁用
				dataList: [], //列表
				PickerIndex: 1, // 时间弹层的层级
				StartDate: null, // 限制开始时间
				EndDate: Date.now(), // 结束时间
				singleTimes: [getBefore7DateTime(), getFormatDateTime(new Date())], // 日期选择控件
				FormData: {
					PageIndex: 1,
					PageSize: 30,
					FBDate: '',
					FEDate: '',
					EmplName: '',
					EmplID: null,
					FType: '',
				},

				TimeName: '', //时间名称
				show: false, //时间筛选是否显示
				value1: Number(new Date()), //时间值
				WorkbenchesTitle: '', //点击工作台列表存储的名称
			}

		},
		onUnload() {
			var that = this;

			uni.$off('st_mold_Choice');
		},
		onLoad() {
			//点击工作台列表存储的名称
			this.WorkbenchesTitle = this.$store.state.CRaftModule.MesBasicInfo.WorkbenchesTitle
			this.FormData.FBDate = getBefore7DateTime() //开始时间
			this.FormData.FEDate = getFormatDateTime(new Date()) //结束时间
			// 用户id
			this.FormData.EmplID = this.FormData.EmplID ? this.FormData.EmplID : this.$store
				.state.UserInfo.EmplID
			// 用户名称
			this.FormData.EmplName = this.FormData.EmplName ? this.FormData.EmplName : this
				.$store.state.UserInfo.UserName
			// 判断点击的是领用还是归还
			this.FormData.FType = this.WorkbenchesTitle == '领用' ? 'LY' : 'GH'
			// 列表顶部时间筛选
			this.singleTimes = [this.FormData.FBDate, this.FormData.FEDate]
		},
		onShow() {
			// 重新加载列表
			this.getList
			// 重新筛选监听器
			this.addst_mold_Choice()
		},

		mounted() {
			var that = this;
			that.$nextTick(() => {
				setTimeout(() => {
					that.BtnShow = true;
				}, 500)
			})
			this.addst_mold_Choice()
		},
		methods: {
			GetStatusBackClass(data) { // 根据传入的单据状态值，返回对应的class
				var num
				if (data == true) {
					num = 1
				} else {
					num = 0
				}

				return 'OrderStatus_' + num
			},
			addst_mold_Choice() {
				var that = this;
				uni.$on('st_mold_Choice', function(ret) {
					console.log(ret);
					if (ret.type == that.WorkbenchesTitle + '人员') {
						that.FormData.EmplName = ret.data.EmplName
						that.FormData.EmplID = ret.data.EmplID
					}
				});
			},
			// 前往筛选页
			openBaseScreen(str, type) {
				let that = this;
				let obj = null;
				let url = '/commonPage/Tool/baseScreen';
				if (str == that.WorkbenchesTitle + '人员') {
					obj = {
						allowClear: false,
						cmd: 'MJ_RYSet',
						type: str,
						ListeningName: 'st_mold_Choice',
						serverSearch: {
							isPaging: false, //是否分页
							searchKey: 'EmplName', //搜索关键词，应包含在param中
							showText: 'EmplName', //查询结果显示的字段
							pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
							ChoiceDataKey: 'EmplID',
							ChoiceDataData: that.FormData.EmplID,
						},
						param: {
							EmplName: '',
							PageIndex: 1,
							PageSize: 30
						}
					}
				}
				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: obj
				})
				uni.navigateTo({
					url: url
				})
			},
			// 修改日期
			ChangeDate() {
				var that = this;
				that.PickerIndex = 1;


				that.FormData.FBDate = that.singleTimes[0]
				that.FormData.FEDate = that.singleTimes[1]
				that.contents = []; // 假设这是异步获取数据的操作
				that.$refs.paging.reload();
			},
			closeFilterPopup() { // 关闭筛选弹层
				this.ShowFilterPopup = false;
			},
			OpenFilterPopup() { // 点击打开筛选
				this.ShowFilterPopup = true;
			},
			changeTab(item) { // 切换tab任务
				var that = this;
				that.FormData.MaintenanceStatus = item.data.value
				that.contents = []; // 假设这是异步获取数据的操作
				that.$refs.paging.reload();
			},
			// 重新加载列表
			getList() {
				let that = this;
				that.contents = []; // 假设这是异步获取数据的操作
				that.addst_mold_Choice()
				that.$refs.paging.reload();
			},

			//获取时间
			addTime(name) {
				this.TimeName = name
				if (this.TimeName == '开始') {
					this.value1 = Number(getTimeStamp(this.FormData.FBDate))
				} else {
					this.value1 = Number(getTimeStamp(this.FormData.FEDate))
				}
				this.show = true
			},
			//获取点击的时间进行赋值
			pickerConfirm(e) {
				var time = getFormatDateTime(e.value)
				if (this.TimeName == '开始') {
					this.FormData.FBDate = time
				} else {
					this.FormData.FEDate = time
				}
				this.singleTimes = [this.FormData.FBDate, this.FormData.FEDate]
				this.show = false
			},
			// 重置
			ResetBtn() {
				let that = this;
				this.FormData.FBDate = getBefore7DateTime()
				this.FormData.FEDate = getFormatDateTime(new Date())
				this.singleTimes = [this.FormData.FBDate, this.FormData.FEDate]
				this.FormData.EmplID = this.$store.state.UserInfo.EmplID
				this.FormData.EmplName = this.$store.state.UserInfo.UserName
			},
			// 筛选提交 重新加载
			submit() {

				this.ShowFilterPopup = false;
				this.contents = []; // 假设这是异步获取数据的操作
				this.$refs.paging.reload();
			},
			// 新增
			add() {
				var url = './collectionReturnDetail'
				this.GonavigateTo(url)
			},
			// 获取列表
			queryList(pageNo) {
				let that = this;
				that.FormData.PageIndex = pageNo
				uni.showLoading({
					title: '加载数据中...',
				});
				try {
					that.Request.request('MJ_LYList', this.FormData, function(ret) {
						console.log(ret)
						if (ret.status == 200) {
							uni.hideLoading();
							ret.data.ds.map((item) => {

								item.BillDate = formatDateTime(item.BillDate)
								item.CKTime = formatDateTime(item.CKTime)
								item.RKTime = formatDateTime(item.RKTime)

							})
							that.$refs.paging.complete(ret.data.ds);
						}
					})
				} catch (e) {
					uni.hideLoading();
					this.$utils.hideLoading();
					this.$utils.msg('请求失败请重试')
				}
			},
			// 点击列表详情
			itemClick(item, index) {
				var url = `./collectionReturnDetail?StockID=${item.StockID}`
				this.GonavigateTo(url)
			},
			// 跳转
			GonavigateTo(url) {
				let that = this;
				if (that.disabled == false) {
					// 立即禁用点击
					that.disabled = true
					uni.navigateTo({
						url: url,
						animationType: 'slide-in-right', // 动画类型
						animationDuration: 300 // 动画时长
					});
					setTimeout(() => {
						that.disabled = false
					}, 2000)
				}

			}

		}
	}
</script>

<style lang="scss">
	@import "./css/index.scss";

</style>